<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 45px;
            background-color: red;
            /* overflow: hidden; */
            overflow: scroll;
        }
        .img{
            width: 200px;
            height: 200px;
            display: block;  
            text-decoration: 0.1;
        }img:last-child{
             opacity: 0.7;
        }
    </style>
</head>
<body>
    <!-- overflow属性值
         visible:默认值。内容不会被修剪，会呈现在元素框之外。
         hidden：内容会被修剪，并且其余内容不可见的
         scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容。
         auto：如果内容会被修剪，则浏览器会显示滚动条以便查看其余内容。
         inherit：规定应该从父元素继承overfiow 属性的值。
    -->
    <div class="box">
        css overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条
    </div>
    <img src="./imag/641.webp/" alt="图片1">
    <img src="./imag/641.webp/" alt="图片2">
    <input type="text" placeholder="请输入要搜索的文字">
</body>
</html>